<template>
	<view ref="tabsContainer" class="tabs-box dis-between" :style="style">
		<view :id="idName + index" :class="index === current? 'main-color': ''" @click="_click(index, $event, item)" :style="childStyle" v-for="(item, index) in list" :key="index">{{item.title || item}}</view>
		<p :style="Left" class="line main-bg"></p>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			fontSize: {
				type: Number,
				default: () => 38
			},
			padding: {
				type: String,
				default: () => '0rpx'
			}
		},
		computed: {
			style() {
				let _this = this;
				return `fontSize: ${_this.fontSize}rpx;padding: 0 ${_this.padding} 27rpx;`;
			},
			childStyle() {
				let _this = this;
				return `height: ${_this.fontSize}rpx; lineHeight: ${_this.fontSize}rpx`;
			},
			Left() {
				let _this = this;
				return `left: ${_this.left}px; width: ${_this.width}px`;
			}
		},
		data() {
			return {
				current: 0,
				left: 0,
				width: 0,
				idName: 'tab_' + Math.ceil((Math.random() * 100))
			}
		},
		activated() {
			this.width = document.getElementById(this.idName + this.current).clientWidth;
			this.left = document.getElementById(this.idName + this.current).offsetLeft;
		},
		mounted() {
			this.width = document.getElementById(this.idName + 0).clientWidth;
			this.left = document.getElementById(this.idName + 0).offsetLeft;
		},
		methods: {
			_click(idx, e, item) {
				if (idx === this.current) return;
				this.current = idx;
				let target = e.target;
				this.width = document.getElementById(this.idName + idx).clientWidth;
				this.left = target.offsetLeft;
				this.$emit('click', item.value || item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-box {
		position: relative;
		color: rgba(255, 255, 255, .4);
		border-bottom: 1px solid rgba(255, 255, 255, .1);
		.line {
			position: absolute;
			height: 4rpx;
			bottom: 0;
			transition: left .2s linear;
		}
	}
</style>
